<template>
  <div class="homebox">
    <div class="homeTop">
      <img
        src="https://shark2.douyucdn.cn/front-publish/m-douyu-v3-master/assets/images/logo_864f3ef.png"
        alt=""
      />
      <img
        class="shousuo"
        src="https://shark2.douyucdn.cn/front-publish/m-douyu-v3-master/assets/images/search_0f4cda6.png"
        alt=""
      />
      <input class="inp" type="text" placeholder="搜索"  />
      <div class="dakai">打开App</div>
    </div>
    <div class="daohang">
      <DaoHang />
    </div>
    <div class="content">
      <div class="tc">
        <van-cell is-link @click="showPopup"
          ><img
            class="danchu"
            src="https://shark2.douyucdn.cn/front-publish/m-douyu-v3-master/assets/images/category_0148919.png"
            alt=""
        /></van-cell>
        <van-popup
          v-model:show="show"
          position="top"
          closeable
          close-icon-position="top-left"
          round="flase"
          :style="{ height: '80%' }"
        >
          <div class="neirong">
            <div class="title">
              <p>选择分类</p>
            </div>
            <div class="nr">
              <van-tabs
                v-model:active="active"
                title-active-color="#FF552E"
                @change="orderChange"
                sticky
              >
                <van-tab title="全部"></van-tab>
                <van-tab
                  v-for="item in daohangList"
                  :title="item.cate1Name"
                  :key="item.cate1Name"
                  :name="item.cate1Id"
                >
                </van-tab>
              </van-tabs>
            </div>
            <div class="matter">
              <ul class="uls">
                <li
                  v-for="(item, i) in matterList"
                  :key="i"
                  @click="tiaozhuan(item)"
                >
                  <img :src="item.icon" alt="" />
                  <p>{{ item.cate2Name }}</p>
                </li>
              </ul>
            </div>
          </div>
        </van-popup>
      </div>
      <router-view></router-view>
    </div>
    <div>
      <a class="DownloadBtn" href="http://182.61.48.149/">打开斗鱼App，看更多精彩内容</a>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import DaoHang from "@/components/HomePageC/DaoHang.vue";
import { getFenLei } from "@/api/roomList";
export default {
  data() {
    return {
      daohangList: [],
      matterList: "",
      jieshou: [],
    };
  },
  setup() {
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    return {
      show,
      showPopup,
    };
  },
  created() {
    this.shuju();
  },
  methods: {
    async shuju() {
      let res = await getFenLei();
      console.log(res);
      this.daohangList = res.data.cate1Info;
      this.matterList = res.data.cate2Info;
      this.jieshou = res.data.cate2Info;
    },
    async orderChange(name) {
      if (name == "") {
        this.matterList = this.jieshou;
      } else {
        this.matterList = this.jieshou;
        let aaa = Object.values(this.matterList).filter(
          (item) => item.cate1Id == name
        );
        this.matterList = aaa;
      }
    },
    tiaozhuan(item) {
      this.$router.push({
        name: "QeiHuan",
        query: {
          qh: item.shortName,
          name: item.cate2Name,
        },
      });
      this.show = false;
    },
  },
  components: { DaoHang },
};
</script>

<style lang="scss"  scoped>
.homebox {
  width: 7.8rem;
  height: 0.82rem;
  .homeTop {
    width: 8rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
    img {
      width: 1.52rem;
    }
    .shousuo {
      width: 0.3rem;
      position: absolute;
      left: 2.1rem;
      top: 0.25rem;
    }
    .inp {
      width: 4.5rem;
      height: 0.6rem;
      background-color: #f2f2f2;
      border-radius: 0.2rem;
      font-size: 0.25rem;
      box-sizing: border-box;
      padding-left: 0.6rem;
      color: #bbbbbb;
      border: none;
    }
    .dakai {
      text-align: center;
      width: 1.2rem;
      height: 0.7rem;
      border-radius: 0.3rem;
      background-color: #ff5d23;
      font-size: 0.25rem;
      color: #fff;
      box-sizing: border-box;
      padding-top: 0.2rem;
    }
  }
}
.daohang {
  width: 8rem;
  height: 0.5rem;
}
.danchu {
  width: 0.8rem;
}
.tc {
  position: absolute;
  right: 0;
  top: 0.8rem;
  .title {
    width: 7.8rem;
    text-align: center;
    margin-top: 0.2rem;
    color: #6a6969;
    p {
      font-size: 0.3rem;
    }
  }
  .nr {
    width: 7.8rem;
    margin-top: 1.1rem;
  }
}
.matter {
  width: 7.8rem;
  margin-top: 0.3rem;
  background-color: #f4f4f4;
  .uls {
    width: 7.8rem;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 2.5rem;
      height: 3rem;
      text-align: center;
      border: 0.01rem rgb(163, 162, 162) dashed;
      img {
        width: 1.5rem;
        border-radius: 50%;
        margin-top: 0.5rem;
      }
      p {
        color: #6a6969;
        font-size: 0.2rem;
      }
    }
  }
}
::v-deep .van-badge__wrapper {
  font-size: 0.4rem;
}
::v-deep .van-tab__text {
  font-size: 0.3rem;
  margin-left: 0.4rem;
  font-weight: 500;
}
::v-deep .van-tabs__line {
  width: 0.8rem;
  margin-left: 0.2rem;
  height: 0.04rem;
  margin-top: 0.2rem;
}
.DownloadBtn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, #ff6a00, #ff6a00, #ff4823);
  margin: 0 15px 15px;
  color: #fff;
  text-align: center;
  z-index: 20;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10em;
  line-height: 36px;
}
</style>